<template>
    <div class="theme-test-page">
        <div class="test-container">
            <h1>主题切换测试页面</h1>
            
            <div class="test-section">
                <h2>基础元素测试</h2>
                <p>这是一个段落文本，用于测试文字颜色在主题切换时的表现。</p>
                <div class="test-card">
                    <h3>卡片标题</h3>
                    <p>卡片内容文本</p>
                    <button class="test-btn">测试按钮</button>
                </div>
            </div>

            <div class="test-section">
                <h2>表单元素测试</h2>
                <div class="form-group">
                    <label>输入框：</label>
                    <input type="text" placeholder="请输入内容" class="test-input" />
                </div>
                <div class="form-group">
                    <label>文本域：</label>
                    <textarea placeholder="请输入多行内容" class="test-textarea"></textarea>
                </div>
                <div class="form-group">
                    <label>选择框：</label>
                    <select class="test-select">
                        <option>选项1</option>
                        <option>选项2</option>
                        <option>选项3</option>
                    </select>
                </div>
            </div>

            <div class="test-section">
                <h2>表格测试</h2>
                <table class="test-table">
                    <thead>
                        <tr>
                            <th>列1</th>
                            <th>列2</th>
                            <th>列3</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>数据1</td>
                            <td>数据2</td>
                            <td>数据3</td>
                        </tr>
                        <tr>
                            <td>数据4</td>
                            <td>数据5</td>
                            <td>数据6</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="test-section">
                <h2>状态文本测试</h2>
                <p class="success-text">成功状态文本</p>
                <p class="warning-text">警告状态文本</p>
                <p class="error-text">错误状态文本</p>
                <p class="info-text">信息状态文本</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ThemeTest',
    data() {
        return {
            // 测试数据
        };
    }
};
</script>

<style lang="less" scoped>
.theme-test-page {
    padding: 20px;
    min-height: 100vh;
    background: @light-bg-secondary;
    color: @light-text-primary;
    transition: @theme-transition;
}

.test-container {
    max-width: 800px;
    margin: 0 auto;
    background: @light-bg-primary;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px @light-shadow;
    transition: @theme-transition;
}

.test-section {
    margin-bottom: 30px;
    
    h2 {
        color: @light-text-primary;
        border-bottom: 2px solid @blueColor;
        padding-bottom: 10px;
        margin-bottom: 20px;
        transition: @theme-transition;
    }
}

.test-card {
    background: @light-bg-tertiary;
    padding: 20px;
    border-radius: 6px;
    border: 1px solid @light-border;
    margin: 15px 0;
    transition: @theme-transition;
    
    h3 {
        color: @light-text-primary;
        margin-bottom: 10px;
        transition: @theme-transition;
    }
    
    p {
        color: @light-text-secondary;
        margin-bottom: 15px;
        transition: @theme-transition;
    }
}

.test-btn {
    background: @blueColor;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: @theme-transition;
    
    &:hover {
        background: darken(@blueColor, 10%);
    }
}

.form-group {
    margin-bottom: 15px;
    
    label {
        display: block;
        margin-bottom: 5px;
        color: @light-text-primary;
        font-weight: bold;
        transition: @theme-transition;
    }
}

.test-input,
.test-textarea,
.test-select {
    width: 100%;
    padding: 10px;
    border: 1px solid @light-border;
    border-radius: 4px;
    background: @light-bg-primary;
    color: @light-text-primary;
    transition: @theme-transition;
    
    &:focus {
        outline: none;
        border-color: @blueColor;
        box-shadow: 0 0 0 2px rgba(26, 143, 227, 0.2);
    }
    
    &::placeholder {
        color: @light-text-muted;
    }
}

.test-table {
    width: 100%;
    border-collapse: collapse;
    background: @light-bg-primary;
    border: 1px solid @light-border;
    transition: @theme-transition;
    
    th,
    td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid @light-border;
        color: @light-text-primary;
        transition: @theme-transition;
    }
    
    th {
        background: @light-bg-tertiary;
        font-weight: bold;
    }
    
    tr:hover {
        background: @light-bg-tertiary;
    }
}

.success-text {
    color: #52c41a;
    font-weight: bold;
}

.warning-text {
    color: #faad14;
    font-weight: bold;
}

.error-text {
    color: #ff4d4f;
    font-weight: bold;
}

.info-text {
    color: @blueColor;
    font-weight: bold;
}

// 暗模式样式
.theme-dark {
    .theme-test-page {
        background: @dark-bg-primary;
        color: @dark-text-primary;
    }
    
    .test-container {
        background: @dark-bg-secondary;
        box-shadow: 0 2px 10px @dark-shadow;
    }
    
    .test-section h2 {
        color: @dark-text-primary;
    }
    
    .test-card {
        background: @dark-bg-tertiary;
        border-color: @dark-border;
        
        h3 {
            color: @dark-text-primary;
        }
        
        p {
            color: @dark-text-secondary;
        }
    }
    
    .form-group label {
        color: @dark-text-primary;
    }
    
    .test-input,
    .test-textarea,
    .test-select {
        background: @dark-bg-tertiary;
        border-color: @dark-border;
        color: @dark-text-primary;
        
        &::placeholder {
            color: @dark-text-muted;
        }
    }
    
    .test-table {
        background: @dark-bg-secondary;
        border-color: @dark-border;
        
        th,
        td {
            color: @dark-text-primary;
            border-color: @dark-border;
        }
        
        th {
            background: @dark-bg-tertiary;
        }
        
        tr:hover {
            background: @dark-bg-tertiary;
        }
    }
}
</style>
